<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-09 18:31:36
 * @LastEditTime: 2020-06-07 11:49:43
 * @FilePath: \client\src\components\NavBar.vue
 * @Description: 导航栏组件
 -->

<template>
  <!-- variant属性用于调节导航栏的颜色 -->
  <b-navbar toggleable="lg" type="dark" variant="dark" sticky fixed="top">
    <b-container>
      <b-navbar-brand to="/" @click="toIndex()">{{blogInfo.blogName}}</b-navbar-brand>
      <!-- 该组件的target属性和下方标签的id对应，表示页面缩小之后要折叠的内容 -->
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <!-- 搜索框 -->
        <b-nav-form @keydown.enter.prevent="search()">
          <b-form-input size="sm" class="mr-sm-2" v-model="queryString" placeholder="请输入关键词..."></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" @click="search()">搜索</b-button>
        </b-nav-form>
        <!-- 导航栏右侧内容 -->
        <b-navbar-nav class="ml-auto">
          <b-nav-item to="/websites">网站导航</b-nav-item>
          <b-nav-item to="/archives">归档</b-nav-item>
          <b-nav-item to="/about">关于我</b-nav-item>
          <b-nav-item to="/message">留言</b-nav-item>
          <!-- 登录后操作下拉框 -->
          <b-nav-item-dropdown :text="userInfo.name" right v-if="commToken">
            <b-dropdown-item @click="exit()">退出登录</b-dropdown-item>
          </b-nav-item-dropdown>
          <b-nav-item-dropdown text="登录" right v-else>
            <b-dropdown-item @click="login('gitee')">码云登录</b-dropdown-item>
            <b-dropdown-item @click="login('qq')">QQ登录</b-dropdown-item>
          </b-nav-item-dropdown>
          <!-- 头像,外面嵌套b-nav-item是为了让头像上下居中 -->
          <b-nav-item v-if="commToken">
            <b-img class="head-img" :src="userInfo.avatarUrl" rounded="circle"></b-img>
          </b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-container>
  </b-navbar>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import url from "@/request/url";
export default {
  name: "NavBar",
  data() {
    return {
      queryString: null
    };
  },
  computed: {
    ...mapState({
      commToken: state => state.app.commToken,
      userInfo: state => state.user.userInfo,
      blogInfo: state => state.app.blogInfo
    })
  },
  methods: {
    ...mapMutations([
      "setCommToken",
      "setPageInfo",
      "setQueryString",
      "setCurrentPage",
      "setCondition"
    ]),
    ...mapActions(["getArticles"]),
    // 退出登录
    exit() {
      this.setCommToken("");
    },
    search() {
      if (this.queryString != null && this.queryString != "") {
        this.setCondition({
          condition: "str",
          data: this.queryString
        });
        this.setCurrentPage(1);
        this.getArticles();
      }
    },
    toIndex() {
      this.queryString = "";
      this.setCondition({
        condition: null,
        data: null
      });
      this.setCurrentPage(1);
      this.getArticles();
      this.$router.replace("/").catch(err => {
        console.log(err);
      });
    },
    login(platform) {
      this.$axios
        .get(url.comm.login, {
          params: {
            type: platform
          }
        })
        .then(res => {
          if (res.data && res.data.code == 20000) {
            const loginUrl = res.data.msg;
            let a = document.createElement("a");
            a.setAttribute("href", loginUrl);
            // a.setAttribute("target","_self");
            a.click();
          }
        });
    }
  }
};
</script>

<style scoped>
.head-img {
  width: 25px;
  height: 25px;
}
</style>>